<template>
  <div class="content" style="width:1000px;height:700px;">
    <!-- addstatus -->
    <div class="box" style="width:1000px;height:700px;">
      <!-- <div style="height:100px;width:100%"></div> -->
      <div class="warpprop" style="width:1000px;height:700px;">
        <div class="propheader">
          {{type==1?'新建代理':'编辑代理'}}
          <!-- <p class="close1" >关闭</p> -->
          <el-button class="close1" type="text" @click.native="setaddstatus">关闭</el-button>
        </div>
        <div class="seachlist">
          <div class="seachlistitem">
            <div class="nameone">代理名称</div>
            <el-input style="width:200px;" v-model="addparam.name"></el-input>
          </div>

          <div class="seachlistitem">
            <div class="nameone">资质资料</div>
            <el-upload
              :action="$src+'/api/upload'"
              name="file"
              class="upload-demo"
              :multiple="false"
              :limit="1"
              :file-list="file_list"
              :on-success="successfile"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
          <div class="seachlistitem">
            <div class="nameone">类型</div>
            <el-radio v-model="addparam.class_id" label="1">传统</el-radio>
            <el-radio v-model="addparam.class_id" label="2">新媒体</el-radio>
          </div>
          <div class="seachlistitem">
            <div class="nameone">联系人</div>
            <el-input style="width:200px;" v-model="addparam.contact"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">联系电话</div>
            <el-input style="width:200px;" v-model="addparam.mobile"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">税号</div>
            <el-input style="width:200px;" v-model="addparam.number"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">开户银行</div>
            <el-input style="width:200px;" v-model="addparam.bank"></el-input>
          </div>

          <div class="seachlistitem">
            <div class="nameone">银行账号</div>
            <el-input style="width:200px;" v-model="addparam.bank_num"></el-input>
          </div>
          <div class="seachlistitem" style="width:50%;">
            <div class="nameone">省/市</div>
            <v-distpicker
              hide-area
              :city="addparam.city"
              :province="addparam.province"
              @selected="selectcity"
            ></v-distpicker>
          </div>
        </div>
        <div class="sectggg">
          <div class="nameone">广告主</div>
          <el-button
            type="text"
            style="margin-left:20px;margin-right:20px;"
            @click.native="setchoicegg"
          >选择广告主</el-button>
          <!-- <el-button type="primary">新建广告主</el-button> -->
        </div>
        <div class="p-list" v-if="selectGGZ.length">
          <el-table
            :data="selectGGZ"
            border
            :row-style="{height:'0px'}"
            :cell-style="{padding:'0px 0'}"
            style="width: 100%"
          >
            <el-table-column prop="name" label="广告主" align="center"></el-table-column>
            <el-table-column align="center" label="代理起始时间">
              <template slot-scope="scope">
                <el-date-picker
                  style="max-width:150px;"
                  v-model="selectGGZ[scope.$index].start_time"
                  type="date"
                  @input="change"
                  placeholder="选择日期"
                ></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column align="center" label="代理结束时间">
              <template slot-scope="scope">
                <el-date-picker
                  style="max-width:150px;"
                  @input="change"
                  v-model="selectGGZ[scope.$index].end_time"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column prop="created_at" align="center" label="添加日期"></el-table-column>
            <el-table-column align="center" width="100" label="操作">
              <template slot-scope="scope">
                <!-- <el-button @click="del(scope.row)" type="text" size="small">修改</el-button> -->
                <el-button @click="delitem(scope)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="sectggg" style="margin-top:10px;">
          <div class="nameone">说明</div>
          <el-input type="textarea" v-model="addparam.remark" :rows="2" placeholder="请输入内容"></el-input>
        </div>
        <div class="sectggg" style="margin-top:10px;">
          <div class="nameone">状态</div>
          <el-radio v-model="addparam.status" label="1">草稿</el-radio>
          <el-radio v-model="addparam.status" label="2">提交审核</el-radio>
        </div>
        <div class="closesee">
          <el-button type="primary" @click.native="save">保存</el-button>
        </div>
      </div>
    </div>
    <!-- choice -->
    <div class="box propp" v-if="choice">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:700px;height:500px;">
        <div class="propheader">
          选择广告主
          <!-- <p class="close1" >关闭</p> -->
          <el-button class="close1" type="text" @click.native="setchoicegg">关闭</el-button>
        </div>
        <div class="gg-seach">
          <div class="gg-name">检索关键字</div>
          <el-input style="width:200px;"></el-input>
          <el-button type="primary" style="margin:0 10px;" @click.native="GGZseach">检索</el-button>
          <!-- <el-button type="primary">新建</el-button> -->
        </div>
        <div class="gg-list">
          <el-table
            :data="GGZ_list"
            border
            :row-style="{height:'0px'}"
            :cell-style="{padding:'4px 0'}"
            style="width: 100%"
            :row-class-name="tableRowClassName"
          >
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column prop="city" label="城市" align="center"></el-table-column>
            <el-table-column prop="name" label="广告主" align="center"></el-table-column>
            <el-table-column prop align="center" label="联系人"></el-table-column>
            <el-table-column prop="mobile" label="电话" align="center"></el-table-column>
            <el-table-column prop="created_at" align="center" label="创建日期"></el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  @click="clickselect(scope.row)"
                  type="text"
                  size="small"
                >{{scope.row.check?'取消选择':'选择'}}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block block1" style="justify-content: space-between;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="changGGZ"
              :current-page.sync="GGZ_page"
              :page-size="5"
              layout="prev, pager, next, jumper"
              :total="GGZ_alltotal"
            ></el-pagination>
          </div>
        </div>
        <div class="closesee" style="margin-top: 20px;">
          <el-button type="primary" @click.native="setchoicegg">关闭</el-button>
        </div>
      </div>
    </div>
    <div class="prop propp" v-if="record">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:800px;height:450px;">
        <div class="propheader">
          违规记录
          <!-- <p class="close1" >关闭</p> -->
          <el-button class="close1" type="text" @click.native="setrecord">关闭</el-button>
        </div>
        <div class="gg-seach">
          <div class="gg-name" style="width:auto;">代理商名称：</div>
          <div class="gg-name">代理商A</div>
          <div class="gg-name">违规日期：</div>
          <el-date-picker
            v-model="value1"
            style="width:200px;"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <el-button type="primary" style="margin:0 10px;">检索</el-button>
        </div>
        <div class="gg-list">
          <div class="block">
            <el-button type="text">添加违规记录</el-button>
          </div>
          <el-table
            :data="list"
            border
            :row-style="{height:'0px'}"
            :cell-style="{padding:'0px 0'}"
            style="width: 100%"
          >
            <el-table-column label="序号" align="center" width="50"></el-table-column>
            <el-table-column prop="date" label="违规性质" align="center"></el-table-column>
            <el-table-column prop="name" label="违规时间" align="center"></el-table-column>
            <el-table-column prop="province" align="center" label="违规类容"></el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage3"
              :page-size="100"
              layout="prev, pager, next, jumper"
              :total="1000"
            ></el-pagination>
          </div>
        </div>
        <div class="closesee">
          <el-button type="primary">关闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VDistpicker from "v-distpicker";
import {
  GetAgencyManagement,
  getAdvertising,
  editAgencyIfo,
  AddAgencyManagement,
  getAgencyIfo
} from "@/api/Market.js";
import { SETDATE } from "../../../api/System.js";
export default {
  comments: {
    VDistpicker
  },
  props: ["sale_id"],
  data() {
    return {
      // type为1新建代理 2位编辑代理
      type: 1,
      choice: false,
      currentPage3: 1,
      addstatus: false,
      record: false,
      value1: "",
      radio: "1",
      list: [{ name: "xxxx" }],
      //列表页数
      page: 1,
      //总条数
      alltotal: 0,
      alllist: [],
      name: "",
      //添加代理参数
      addparam: {
        name: "",
        province: "",
        city: "",
        file_path: "",
        class_id: "1",
        contact: "",
        mobile: "",
        number: "",
        bank: "",
        bank_num: "",
        remark: "",
        status: "1"
      },
      //广告主选择的参数
      GGZ_name: "",
      GGZ_page: 1,
      GGZ_alltotal: 0,
      GGZ_list: [],
      //选中广告主列表
      selectGGZ: [],
      file_list: []
    };
  },
  created() {
    // this.getlist()
  },
  methods: {
    //获取详情
    getiteminfo(id) {
      getAgencyIfo({ id: id }).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.addparam.name = res.data.name;
          this.addparam.province = res.data.province;
          this.addparam.city = res.data.city;
          this.addparam.file_path = res.data.file_path;
          this.file_list = [{ name: "资质资料", url: res.data.file_path }];
          this.addparam.class_id = res.data.class_id + "";
          this.addparam.contact = res.data.contact;
          this.addparam.mobile = res.data.mobile;
          this.addparam.number = res.data.number;
          this.addparam.bank = res.data.bank;
          this.addparam.bank_num = res.data.bank_num;
          this.addparam.remark = res.data.remark;
          this.addparam.status = res.data.status + "";
          this.selectGGZ = res.data.get_media_up_agent;
          this.selectGGZ.forEach(element => {
            element.id = element.media_up_id;
            element.name = element.media_name;
            element.created_at = SETDATE(element.created_at, true);
            console.log(new Date(element.end_time * 1000));
            element.start_time = new Date(element.start_time * 1000);
            element.end_time = new Date(element.end_time * 1000);
          });
          //打开编辑
          this.setaddstatus();
        }
      });
    },
    //编辑代理
    editortetx(row) {
      this.type = 2;
      this.ID = row.id;
      this.getiteminfo(this.ID);
    },
    //广告主检索
    GGZseach() {
      this.GGZ_page = 1;
      this.GGZ_alltotal = 0;
      this.getGGZlist();
    },
    //广告主列表页数改变
    changGGZ(e) {
      this.GGZ_page = e;
      this.getGGZlist();
    },
    //选择广告主
    clickselect(row) {
      console.log(row);
      var id = row.id;
      if (row.check) {
        var index = "";
        for (let i = 0; i < this.selectGGZ.length; i++) {
          if (this.selectGGZ[i].id == id) {
            index = i;
            break;
          }
        }
        this.selectGGZ.splice(index, 1);
        row.check = false;
      } else {
        row.start_time = "";
        row.end_time = "";
        this.selectGGZ.push(row);
        row.check = true;
      }
    },
    //获取广告主列表
    getGGZlist() {
      let data = {
        name: this.GGZ_name,
        per: 5,
        page: this.GGZ_page
      };
      getAdvertising(data).then(res => {
        if ((res.code = 200)) {
          this.GGZ_list = res.data.data;
          this.GGZ_list.forEach(element => {
            element.created_at = SETDATE(element.created_at, true);
            this.selectGGZ.forEach(item => {
              if (item.id == element.id) {
                element.check = true;
              }
            });
          });

          this.GGZ_alltotal = res.data.total;
          this.GGZ_page = res.data.current_page;
        }
      });
    },
    //点击新建代理

    change(e) {
      // console.log(e)
      this.$forceUpdate();
    },
    //
    save() {
      // console.log(this.addparam)
      if (!this.addparam.name) {
        this.$message({
          message: "代理名称不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.addparam.file_path) {
        this.$message({
          message: "请上传资质资料",
          type: "warning"
        });
        return;
      }
      if (!this.addparam.contact) {
        this.$message({
          message: "联系人不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.addparam.mobile) {
        this.$message({
          message: "联系电话不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.addparam.number) {
        this.$message({
          message: "税号不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.addparam.bank) {
        this.$message({
          message: "开户银行不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.addparam.bank_num) {
        this.$message({
          message: "银行账号不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.addparam.city) {
        this.$message({
          message: "请选择省/市",
          type: "warning"
        });
        return;
      }
      // console.log(this.selectGGZ)
      // if(this.selectGGZ.length<1){
      //    this.$message({
      //       message: '请选择广告主',
      //       type: 'warning'
      //   })
      //   return
      // }
      var falg = true;
      this.selectGGZ.forEach(element => {
        if (!element.start_time || !element.end_time) {
          falg = false;
        }
      });
      if (!falg) {
        this.$message({
          message: "代理起始时间和结束时间不能为空",
          type: "warning"
        });
        return;
      }
      var arr = [];
      console.log(this.selectGGZ);
      let selectGGZ = this.selectGGZ;
      selectGGZ.forEach(element => {
        arr.push({
          id: element.id,
          start_time: new Date(element.start_time).getTime() / 1000,
          end_time: new Date(element.end_time).getTime() / 1000
        });
      });
      this.addparam.media_up = arr;
      this.addparam.sale_id = this.sale_id;
      // console.log(this.addparam)
      if (this.type == 1) {
        AddAgencyManagement(this.addparam).then(res => {
          // console.log(res)
          if (res.code == 200) {
            this.$message({
              message: "添加成功",
              type: "success"
            });
            this.name = "";
            this.page = 1;
            this.alltotal = 0;
            this.setaddstatus();
            this.getlist();
            this.selectGGZ = [];
            this.$emit("closeAddAgent");
          }
        });
      } else {
        var param = { ...this.addparam };
        param.id = this.ID;
        editAgencyIfo(param).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.$message({
              message: "编辑成功",
              type: "success"
            });
            this.name = "";
            this.page = 1;
            this.alltotal = 0;
            this.setaddstatus();
            this.selectGGZ = [];
            this.getlist();
          }
        });
      }
    },
    successfile(e) {
      // console.log(e)
      if (e.code == 200) {
        // this.file_list=[]
        console.log(e.data);
        this.addparam.file_path = e.data.path;
      }
    },
    //删除广告主
    delitem(e) {
      //  console.log(e)
      var index = e.$index;
      this.selectGGZ.splice(index, 1);
    },
    //设置页数
    setpage(e) {
      //  console.log(e)
      this.page = e;
      this.getlist();
    },
    //点击搜索
    seach() {
      this.page = 1;
      this.alltotal = 0;
      this.getlist();
    },
    getlist() {
      let data = {
        name: this.name,
        page: this.page,
        per: 10
      };
      GetAgencyManagement(data).then(res => {
        if (res.code == 200) {
          // console.log(res)
          this.alltotal = res.data.total;
          this.page = res.data.current_page;
          this.alllist = res.data.data;

          this.alllist.forEach(element => {
            element.created_at = SETDATE(element.created_at, true);
          });
        }
      });
    },
    setrecord() {
      // console.log("xx")
      this.record = !this.record;
    },
    recordsee() {
      this.setrecord();
    },
    setaddstatus() {
      if (this.addstatus) {
        this.addparam.name = "";
        this.addparam.province = "";
        this.addparam.file_path = "";
        this.addparam.class_id = "1";
        this.addparam.contact = "";
        this.addparam.mobile = "";
        this.addparam.number = "";
        this.addparam.bank = "";
        this.addparam.bank_num = "";
        this.addparam.remark = "";
        this.addparam.status = "1";
        this.selectGGZ = [];
      }
      this.addstatus = !this.addstatus;
      this.$emit("closeAddAgent");
    },
    setchoicegg() {
      if (!this.choice) {
        this.getGGZlist();
      }

      this.choice = !this.choice;
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    selectcity(e) {
      // console.log(e);
      this.addparam.province = e.province.value;
      this.addparam.city = e.city.value;
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.check) {
        return "warning-row";
      } else {
        return "";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  height: 40px;
  width: 97%;
  display: flex;
  margin: 0 auto;
  align-items: center;
  flex-direction: row-reverse;
}

.Search {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.topheader {
  width: 97%;
  margin: 0 auto;
  height: 60px;
  display: flex;
  align-items: center;
  .topname {
    width: 100px;
    font-size: 14px;
  }
}
.d-list {
  width: 95%;
  margin: 0 auto;
  margin-top: 10px;
}
.block {
  float: right;
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.prop {
  width: calc(100% - 210px);
  height: 100%;
  /* position: fixed;
  top: 0; */
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  /* z-index: 998; */
}
.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: -15px;
  color: #169bd5;
}
.warpprop {
  width: 600px;
  height: 450px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
  .seachlist {
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    .seachlistitem {
      width: 33%;
      margin-top: 10px;
      display: flex;
      align-items: center;
      .nameone {
        width: 90px;
        font-size: 14px;
      }
    }
  }
}
.sectggg {
  height: 60px;
  width: 95%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  .nameone {
    width: 90px;
    font-size: 14px;
  }
}
.p-list {
  width: 90%;
  margin: 0 auto;
  max-height: 150px;
  overflow: auto;
  // background: red;
}
.closesee {
  width: 50px;
  margin: 0 auto;
}
.propp {
  /* z-index: 999; */
}
.gg-seach {
  width: 95%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  margin-top: 10px;
  .gg-name {
    width: 100px;
    font-size: 14px;
  }
}
.gg-list {
  width: 90%;
  margin: 0 auto;
  height: 270px;
  margin-top: 20px;
}
</style>